<div class="detail-container" [@right]="outlookState.right" (@right.done)="rerenderChart($event)">
  <stock-detail [stockSource]="quoteToggle" [quoteSource]="quoteDetailSource"></stock-detail>
</div>
<div class="main-container" [@rightOfMain]="outlookState.right">
  <div class="zone-up">
    <dynamic-table class="dynamic-table-standard" [updateEventSource]="params" [scrollable]="true" (stockDblClick)="goCheckDetail($event)"
      (stockClick)="showQuoteDetail($event)"></dynamic-table>
    <!--<quote-table [updateEventSource]="params" [headers]="tableHeaders" [options]="tableOptions" (quoteDblClick)="goCheckDetail($event)"
      (quoteClick)="showQuoteDetail($event)" [scrollable]="true"></quote-table>-->
  </div>
  <div class="zone-down-title">
    <div class="zone-chart component-header">
      <a href="javascript:;" class="drawer-toggle" [class.active]="outlookState.bottom === 'EXPANDED'" (click)="toggleState('bottom')">
        <i class="iconfont icon-down"></i>
      </a>
      个股
    </div>
    <div class="zone-chart component-header">
      所属大盘
    </div>
    <div class="basic-info component-header">
      基本信息
    </div>
  </div>
  <div class="zone-down" [@bottom]="outlookState.bottom" (@bottom.done)="rerenderChart($event)">
    <combo-chart class="zone-chart" [kConfig]="kConfig" [kLists]="kChartList" style="height: 100%" [stockSource]="quoteDetailSource"
      [placementSource]="placeSource"></combo-chart>
    <combo-chart class="zone-chart" [kConfig]="kConfig" [kLists]="kChartList" style="height: 100%" [stockSource]="quoteMotherSource"
      [placementSource]="placeSource"></combo-chart>
    <basic-info class="basic-info" style="height: 100%" [quoteSource]="quoteToggle"></basic-info>
    <!--<bidask class="bidask" style="height: 100%" [quoteSource]="quoteDetailSource"></bidask>-->
  </div>
</div>